<template>
    <div>
      <el-steps :active="1" simple>
        <el-step title="查看实验列表"></el-step>
        <el-step title="查看可预约时间段"></el-step>
        <el-step title="提交预约"></el-step>
      </el-steps>
      <el-card class="box-card">
        <h3>{{experimentDetail.name}}</h3>
        <div v-html="experimentDetail.description"></div>
      </el-card>
      <el-card class="box-card">
        <el-form ref="form" :model="serachForm" label-width="80px">
          <el-form-item label="预约日期">
            <el-row :gutter="50">
              <el-col :span="11">
                <el-date-picker
                  @change="gitAppointments"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date" placeholder="选择日期" v-model="serachForm.date" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col :span="11">
                <el-button type="primary" @click="scheduleOrderHandler()">排课</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="时间段">
            <el-radio-group v-model="serachForm.timeSlotId" @change="gitAppointments">
              <el-radio border :label="ts.id" v-for="(ts, index) in dependencyList.timeSlotList" :key="index">{{ts.timeSlotName}}（{{ts.startTime}}-{{ts.endTime}}）</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-alert
          v-if="appointmentOrder.total > 0"
          title="在当前时间段你已经有预约"
          type="warning"
          :closable="false"><el-button type="text">查看</el-button>
          
        </el-alert>
        <div>
            <el-table
              :data="appointmentsPage.tableData"
              empty-text="没有对应的实验室"
              @selection-change="handleSelectionChange"
              border
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>

              <el-table-column
                label="编号"
                width="68">
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>

              <el-table-column
                prop="name"
                label="实验室名称"
                width="180">
              </el-table-column>

              <el-table-column
                prop="purpose"
                label="用途"
                width="280">
              </el-table-column>

              <el-table-column
                label="已预约人数"
                width="98">
                <template slot-scope="scope">
                  <strong>{{scope.row.appointmentNum}} </strong>
                  <!-- <el-slider v-model="scope.row.num" :max="scope.row.maxNum"></el-slider> -->
                  <!-- <el-progress :percentage="1/15*100"></el-progress> -->
                </template>
              </el-table-column>

              <el-table-column
                label="可预约人数">
                <template slot-scope="scope">
                  <!-- <el-slider v-model="scope.row.num" :max="scope.row.maxNum"></el-slider> -->
                  <el-button type="text"><strong>{{scope.row.maxNumber - scope.row.appointmentNum}} </strong></el-button>
                  <!-- <el-progress :percentage="1/15*100"></el-progress> -->
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <!-- <el-button
                    @click.native.prevent="deleteRow(scope.$index, appointmentsPage.tableData4)"
                    type="text"
                    size="small">
                    详细信息
                  </el-button> -->
                  <template v-if="scope.row.type == 1">
                    已排课
                  </template>
                  <template v-if="scope.row.type == 0">
                    <el-tag v-if="scope.row.maxNumber <= scope.row.appointmentNum">
                      名额已满
                    </el-tag>
                    <el-tag  v-else-if="appointmentOrder.total > 0">不可预约</el-tag>
                    <el-button v-else type="primary" @click="appointmentOrderHandler(scope.$index)">预约</el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </el-card>

      <el-dialog title="确定预约本次实验？" :visible.sync="dialogOrder.show">
        <div>实验室：{{dialogOrder.detail.name}}
          <p>简介：{{dialogOrder.detail.purpose}}</p>
        </div>
        <div>日期：{{dialogOrder.detail.day}}
        </div>
        <div>时间段：{{dialogOrder.detail.timeSlotName}}
          ({{dialogOrder.detail.startTime}}到{{dialogOrder.detail.endTime}})
        </div>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogOrder.show = false">取 消</el-button>
          <el-button type="primary" @click="submitOrder">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="确定本次排课？" :visible.sync="scheduleOrder.show">
        <!-- <div>实验室：{{dialogOrder.detail.name}}
          <p>简介：{{dialogOrder.detail.purpose}}</p>
        </div> -->
        <div>日期：{{serachForm.data}}
        </div>
        <div>时间段：{{serachForm.timeSlotId}}
          ({{dialogOrder.detail.startTime}}到{{dialogOrder.detail.endTime}})
        </div>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="scheduleOrder.show = false">取 消</el-button>
          <el-button type="primary" @click="submitScheduleOrder">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import editDialog from './basic.vue'
import request from '@/utils/request'

export default {
  // props: {
  //   appointmentsPage.tableData: Object
  // },
  components: {
    editDialog
  },
  data() {
    return {
      experimentDetail: {
        name: '1',
        description: '1'
      },
      appointmentsPage: { // 主题数据，设备分页列表，这个地方与list同级的还有分页的其他参数信息
        tableData: [],
        listLoading: true
      },
      renderData: [],
      dialogOrder: {
        show: false,
        detail: {}
      },
      scheduleOrder: {
        show: false,
        detail: {}
      },
      dependencyList: { // 依赖列表，主要是下拉框相关
        timeSlotList: []
      },
      serachForm: {
        // 不需要可见属性，其他规则与增加编辑表单一致
        date: new Date().toLocaleDateString().split('/').join('-'),
        timeSlotId: ''
      },
      appointmentOrder: {
        records: []
      },
      multipleSelection: []
    }
  },
  mounted() {
    const experimentId = this.$route.params.id

    // 时间段列表
    request.get('/items/labTimerSlot').then(res => {
      this.dependencyList.timeSlotList = res.content
      this.serachForm.timeSlotId = res.content[0].id
      this.gitAppointments()
      // 这里应该根据日期和时间段查询所有预约列表
      this.getMainData()
    })
    // 实验的详细信息
    request.get(`/items/labExperiment/${experimentId}`).then(res => {
      this.experimentDetail = res.content
    })
  },
  methods: {
    getMainData() {
      request.get(`/items/labAppointmentCondition?size=30&experimentId=${this.$route.params.id}&timeSlotId=${this.serachForm.timeSlotId}&day=${this.serachForm.date}`).then(res => {
        this.appointmentsPage.tableData = res.content.records
        console.log(this.appointmentsPage.tableData)
      })
    },
    // 当前用户的预约情况
    gitAppointments() {
      const experimentId = this.$route.params.id
      this.getMainData()
      request.get(`/items/labAppointments?experimentId=${experimentId}&timeSlotId=${this.serachForm.timeSlotId}&day=${this.serachForm.date}`).then(res => {
        // 如果当前实验的当前时间段，查询出来的结果不为空，那么在此时间段内不能预约
        this.appointmentOrder = res.content
      })
    },
    appointmentOrderHandler(index) {
      this.dialogOrder.detail = this.appointmentsPage.tableData[index]
      this.dialogOrder.show = true
      console.log(this.dialogOrder.detail)
    },
    scheduleOrderHandler() {
      // this.scheduleOrder.detail = this.appointmentsPage.tableData[index]
      this.scheduleOrder.show = true
      console.log(this.scheduleOrder.detail)
    },
    submitScheduleOrder() {
      const ids = []
      this.multipleSelection.forEach(element => {
        ids.push(element.id)
      })
      request
        .post('/items/labAppointmentTeacher/teacher', {
          'ids': ids,
          'lab': {
            'customExperimentName': '实验任务自定义名称',
            'experimentId': this.$route.params.id,
            'remark': '备注'
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.dialogOrder.show = false
            this.$message({
              message: '预约成功',
              type: 'success'
            })
            this.gitAppointments()
          }
        })
      this.scheduleOrder.show = false
    },
    // 提交个人预约
    submitOrder() {
      request
        .post('/items/labAppointments/student', {
          experimentId: this.$route.params.id,
          appointmentConditionId: this.dialogOrder.detail.id
        })
        .then(res => {
          if (res.code === 0) {
            this.dialogOrder.show = false
            this.$message({
              message: '预约成功',
              type: 'success'
            })
            this.getMainData()
            this.gitAppointments()
          } else {
            this.$message({
              message: res.content
            })
          }
        })
      this.dialogOrder.show = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    }
  }
}
</script>

<style scoped>
.buttonGroup {
  float: left;
}
.inputGroup {
  float: right;
}
</style>
